new Vue({
    el: "#clipboard",
    data: { menuData: [], isLeft: 0 },
    created: function () {
        this.isLeft = this.getQueryString("isLeft");
    },
    mounted: function () {
        window.electronAPI.onMsessage((event, res) => {
            let that = this;
            setTimeout(() => {
                let menuEl = document.querySelector(
                    ".contextmenu_menu.menu.custom-class"
                );
                if (menuEl) {
                    return;
                }
                if (res.cmd == "show") {
                    that.isLeft = res.isLeft;
                    that.init(that.isLeft);
                }
            }, 300);
        });
    },
    methods: {
        init(isLeft) {
            this.getAll("select * from clipboard").then((res) => {
                console.log(res);
                this.menuData = this.fn(res.reverse(), 0);
                this.createEvent(isLeft);
            });
        },
        getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substring(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        createEvent(isLeft) {
            var obj = document.getElementById("clipboard");
            var evObj = document.createEvent("MouseEvents");
            //alert(this.$refs.clipboard.clientWidth);
            evObj.initMouseEvent(
                "contextmenu",
                true,
                true,
                window,
                1,
                0,
                0,
                isLeft == 1 ? 0 : this.$refs.clipboard.clientWidth,
                0,
                false,
                false,
                false,
                false,
                0,
                null
            );
            obj.dispatchEvent(evObj);
        },
        fn(result, i) {
            let arr = [];
            result.forEach((v) => {
                if (v.parentId === i) {
                    let text = v.value;
                    if (v.name.trim()) {
                        text = v.value.replace(`${v.name}: `, "");
                    } else {
                        text = v.value.replace(": ", "");
                    }

                    v["onClick"] = () => {
                        let channelMsg = {
                            type: "main",
                            cmd: "paste",
                            text: text,
                        };

                        this.send(channelMsg);
                    };
                    if (v.value.length > 30) {
                        v.value = v.value.slice(0, 30) + "...";
                    }
                    arr.push(v);
                    v.children = this.fn(result, v.id);
                }
                if (v.children?.length === 0) {
                    delete v.children;
                }
            });
            return arr;
        },

        send(data) {
            return window.electronAPI.sendMessage(data);
        },
        getAll(sql) {
            let channelMsg = {
                type: "store",
                cmd: "sqliteGetAll",
                sql: sql,
            };
            return this.send(channelMsg);
        },
        onContextmenu(event) {
            let x = 0;
            let y = 0;
            if (window.screenLeft > window.screen.width / 2) {
                x = document.documentElement.clientWidth;
            }
            this.$contextmenu({
                items: this.menuData,
                event,
                customClass: "custom-class", // 自定义菜单 class
                zIndex: 3, // 菜单样式 z-index
                minWidth: 230, // 主菜单最小宽度
            });
            return false;
        },
    },
});
